<template>
  <div class="grid-container">
    <grid-layout v-bind="layout"
                 @layout-updated="layoutUpdatedHandler">
      <grid-item v-for="(item, index) in layout.layout"
                 :key="index"
                 v-bind="item"
                 @resize="resizeHandler"
                 @move="moveHandler"
                 @resized="resizedHandler"
                 @moved="movedHandler">
        <el-card>
          <el-tag size="mini"
                  type="info"
                  slot="header">{{item.i}}</el-tag>
          <template v-if="item.i === '视频播放'">
            <video-player class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          :options="playerOptions"></video-player>
          </template>
        </el-card>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  components: {
    GridLayout,
    GridItem,
    videoPlayer
  },
  data () {
    return {
      // 布局
      layout: {
        layout: [
          // line1
          { "x": 0, "y": 0, "w": 4, "h": 4, "i": "参演人员" },
          { "x": 4, "y": 0, "w": 4, "h": 4, "i": "演练时间" },
          { "x": 8, "y": 0, "w": 2, "h": 4, "i": "演练宣传册" },
          { "x": 10, "y": 0, "w": 2, "h": 4, "i": "点击开始演练" },
          // line2
          { "x": 0, "y": 8, "w": 4, "h": 8, "i": "视频播放" },
          { "x": 4, "y": 4, "w": 2, "h": 4, "i": "演练流程监控" },
          { "x": 6, "y": 4, "w": 2, "h": 4, "i": "演练预案" },
          { "x": 8, "y": 4, "w": 2, "h": 4, "i": "人物列表" },
          { "x": 10, "y": 4, "w": 2, "h": 4, "i": "已切换的业务" },
          // line3
          { "x": 4, "y": 8, "w": 2, "h": 4, "i": "服务器列表" },
          { "x": 6, "y": 8, "w": 2, "h": 4, "i": "脚本效率分析" },
          { "x": 8, "y": 8, "w": 2, "h": 4, "i": "扫一扫有惊喜" },
          { "x": 10, "y": 8, "w": 2, "h": 4, "i": "关于我们" },
        ],
        layoutMd: [
          // line1
          { "x": 0, "y": 0, "w": 4, "h": 4, "i": "参演人员" },
          { "x": 4, "y": 0, "w": 4, "h": 4, "i": "演练时间" },
          { "x": 8, "y": 0, "w": 2, "h": 4, "i": "演练宣传册" },
          { "x": 10, "y": 0, "w": 2, "h": 4, "i": "点击开始演练" },
          // line2
          { "x": 0, "y": 8, "w": 4, "h": 8, "i": "视频播放" },
          { "x": 4, "y": 4, "w": 2, "h": 4, "i": "演练流程监控" },
          { "x": 6, "y": 4, "w": 2, "h": 4, "i": "演练预案" },
          { "x": 8, "y": 4, "w": 2, "h": 4, "i": "人物列表" },
          { "x": 10, "y": 4, "w": 2, "h": 4, "i": "已切换的业务" },
          // line3
          { "x": 4, "y": 8, "w": 2, "h": 4, "i": "服务器列表" },
          { "x": 6, "y": 8, "w": 2, "h": 4, "i": "脚本效率分析" },
          { "x": 8, "y": 8, "w": 2, "h": 4, "i": "扫一扫有惊喜" },
          { "x": 10, "y": 8, "w": 2, "h": 4, "i": "关于我们" },
        ],
        layoutSm: [
          // line1
          { "x": 0, "y": 0, "w": 4, "h": 3, "i": "参演人员" },
          { "x": 4, "y": 0, "w": 4, "h": 3, "i": "演练时间" },
          // line2
          { "x": 0, "y": 3, "w": 2, "h": 3, "i": "演练宣传册" },
          { "x": 2, "y": 3, "w": 2, "h": 3, "i": "点击开始演练" },
          { "x": 4, "y": 3, "w": 4, "h": 3, "i": "视频播放" },
          // line3
          { "x": 0, "y": 6, "w": 2, "h": 3, "i": "演练流程监控" },
          { "x": 2, "y": 6, "w": 2, "h": 3, "i": "演练预案" },
          { "x": 4, "y": 6, "w": 2, "h": 3, "i": "人物列表" },
          { "x": 6, "y": 6, "w": 2, "h": 3, "i": "已切换的业务" },
          // line4
          { "x": 0, "y": 9, "w": 2, "h": 3, "i": "服务器列表" },
          { "x": 2, "y": 9, "w": 2, "h": 3, "i": "脚本效率分析" },
          { "x": 4, "y": 9, "w": 4, "h": 3, "i": "扫一扫有惊喜" },
          // line5
          { "x": 0, "y": 12, "w": 2, "h": 3, "i": "关于我们" }
        ],
        layoutXs: [
          // line1
          { "x": 0, "y": 0, "w": 4, "h": 2, "i": "参演人员" },
          // line2
          { "x": 0, "y": 2, "w": 4, "h": 2, "i": "演练时间" },
          // line3
          { "x": 0, "y": 4, "w": 2, "h": 2, "i": "演练宣传册" },
          { "x": 2, "y": 4, "w": 2, "h": 2, "i": "点击开始演练" },
          // line4
          { "x": 0, "y": 6, "w": 4, "h": 4, "i": "视频播放" },
          // line4
          { "x": 0, "y": 8, "w": 2, "h": 2, "i": "演练流程监控" },
          { "x": 2, "y": 8, "w": 2, "h": 2, "i": "演练预案" },
          // line5
          { "x": 0, "y": 10, "w": 2, "h": 2, "i": "人物列表" },
          { "x": 2, "y": 10, "w": 2, "h": 2, "i": "已切换的业务" },
          // line6
          { "x": 0, "y": 12, "w": 2, "h": 2, "i": "服务器列表" },
          { "x": 2, "y": 12, "w": 2, "h": 2, "i": "脚本效率分析" },
          // line7
          { "x": 0, "y": 14, "w": 4, "h": 2, "i": "扫一扫有惊喜" },
          // line7
          { "x": 0, "y": 16, "w": 2, "h": 2, "i": "关于我们" }
        ],
        colNum: 12,
        rowHeight: 45,
        isDraggable: true,
        isResizable: true,
        isMirrored: false,
        verticalCompact: true,
        margin: [10, 10],
        useCssTransforms: true,
        newlayout: []
      },
      // 记录屏幕宽度默认值
      screenWidth: document.body.clientWidth,
      // 视频
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "",
          src: "http://vjs.zencdn.net/v/oceans.mp4" //url地址
        }],
        poster: "../../static/images/test.jpg", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '网络连接错误，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  //全屏按钮
        }
      }

    }
  },
  mounted () {
    // 获取屏幕宽度
    window.screenWidth = document.body.clientWidth
    this.init()
    // 页面第一次加载，挂载resize 事件
    window.onresize = () => {
      return (() => {
        this.init()
      })()
    }
  },
  watch: {
    // 监听屏幕缩放
    screenWidth (val) {
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        let that = this
        setTimeout(function () {
          // that.screenWidth = that.$store.state.canvasWidth
          // console.log(that.screenWidth)
          that.timer = false
        }, 400)
      }
    }
  },
  methods: {
    init () {
      // 根据屏幕宽度，加载页面
      const that = this
      window.screenWidth = document.body.clientWidth
      that.screenWidth = window.screenWidth
      // console.log(that.screenWidth)
      if (that.screenWidth >= 992) {
        this.layout.layout = this.layout.layoutMd
        this.layout.colNum = 12
      } else if (that.screenWidth >= 768) {
        this.layout.layout = this.layout.layoutSm
        this.layout.colNum = 8
      } else if (that.screenWidth < 768) {
        this.layout.layout = this.layout.layoutXs
        this.layout.colNum = 4
      }
    },
    // 测试代码
    layoutUpdatedHandler (newLayout) {
      newLayout.forEach(e => {
        // console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
        this.layout.newlayout.push(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
      })
      console.log(this.layout.newlayout)

    },
    resizeHandler (i, newH, newW) {
      // this.$log('resizeHandler', `i: ${i}, newH: ${newH}, newW: ${newW}`)
    },
    moveHandler (i, newX, newY) {
      // this.$log('moveHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
    },
    resizedHandler (i, newH, newW, newHPx, newWPx) {
      // this.$log('resizedHandler', `i: ${i}, newH: ${newH}, newW: ${newW}, newHPx: ${newHPx}, newWPx: ${newWPx}`)
    },
    movedHandler (i, newX, newY) {
      // this.$log('movedHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
    }
  }
}
</script>

<style lang="scss" scope>
.grid-container {
  position: relative;
}
.vue-grid-layout {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  .el-card {
    height: 100%;
    .el-card__header {
      position: relative;
      height: 40px;
      .el-tag {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 10px;
        background: none;
        border: none;
        font-size: 15px;
        font-weight: bold;
        color: #606266;
        &--info {
          background: none;
        }
      }
    }
    .el-card__body {
      padding: 0;
      height: calc(100% - 38px);
      .video-player {
        height: 100%;
        .video-js {
          height: 100%;
          position: relative;
          .vjs-big-play-button {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
          }
        }
      }
    }
  }
  .vue-grid-item.vue-grid-placeholder {
    background: none;
  }
  .vue-resizable-handle {
    opacity: 0.3;
    &:hover {
      opacity: 1;
    }
  }
}
</style>

